<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0%;padding: 0;list-style: none;}
        #menu{display: none;width: 150px;border: 2px solid #000;border-radius: 10px;position: fixed;left: 0%;top: 0;overflow: hidden;}
    </style>
</head>
<body>
    <ul id="menu">
        <li>11111</li><li>2222</li><li>3333</li><li>4444</li>
    </ul>
    <script>
        var omenu=document.getElementById('menu');
        // 鼠标右键菜单事件:oncontextmenu
        document.oncontextmenu=function(e){
            e=e||event;
            var omoveX=e.clientX;
            var omoveY=e.clientY;
            omenu.style.display='block ';
            omenu.style.left=omoveX+'px';
            omenu.style.top=omoveY+"px";
            e.preventDefault()
            // return false ;//阻止默认事件
        }
        document.onclick=function(){
            omenu.style.display='none ';
        }
    </script>
</body>
</html>